<template>
	<view class="wrap">
		<view class="wrapTable">
			<view class="wrapTableItem">
				<view class="wrapTableItemBtn" @click="switchTab('0')">
					<view class="wrapTableItemBtnName">待送洗</view>
					<view class="wrapTableItemBtnBorder" v-if="index=='0'"></view>
				</view>
			</view>
			<view class="wrapTableItem">
				<view class="wrapTableItemBtn" @click="switchTab('1')">
					<view class="wrapTableItemBtnName">干洗中</view>
					<view class="wrapTableItemBtnBorder" v-if="index=='1'"></view>
				</view>
			</view>
			<view class="wrapTableItem">
				<view class="wrapTableItemBtn" @click="switchTab('2')">
					<view class="wrapTableItemBtnName">已完成</view>
					<view class="wrapTableItemBtnBorder" v-if="index=='2'"></view>
				</view>
			</view>
		</view>
		<view class="wrapList">
			<view class="wrapListItem"v-for="(item,indexS) in data" :key="index">
				<view class="wrapListItemTitle">{{item.shopName}}</view>
				<view class="wrapListItemContent">
					<view class="wrapListItemContentLi">
						<view class="wrapListItemContentLiKey">状态</view>
						<view class="wrapListItemContentLiValue">{{item.status}}</view>
					</view>
					<view class="wrapListItemContentLi">
						<view class="wrapListItemContentLiKey">时间</view>
						<view class="wrapListItemContentLiValue">{{item.createTime}}</view>
					</view>
					<view class="wrapListItemContentLi">
						<view class="wrapListItemContentLiKey">送洗方式</view>
						<view class="wrapListItemContentLiValue">{{item.type=='1'?'上门送洗':'自主送洗'}}</view>
					</view>
					<view class="wrapListItemContentLi" v-if="index=='0'">
						<view class="wrapListItemContentLiKey">核销码</view>
						<view class="wrapListItemContentLiValue">{{item.code}}</view>
					</view>
					<view class="wrapListItemContentLi" v-if="index=='1'">
						<view class="wrapListItemContentLiKey">确认码</view>
						<view class="wrapListItemContentLiValue">{{item.code}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 搜索为空 -->
		<view v-if="data.length==0" class="emptyCart-box flex-items-plus flex-column">
			<image class="emptyCart-img" src="https://ceres.zkthink.com/static/images/searchEmpty.png"></image>
			<label class="font-color-999 fs26 mar-top-30">暂时没有干洗数据</label>
		</view>
	</view>
</template>

<script>
	import api from './config/api'
	import {sendReq} from '../../../components/canvasShow/config/mixin/sendReqMixin.js'
	export default{
		data(){
			return{
				index:'0',//tab下标
				data:[],//数据集合
			}
		},
		onLoad() {
			this.getInfoList()
		},
		methods:{
			getInfoList(){
				var _this = this
				var apiUrl = api.cleanList+'?status='+_this.index
				let params = {
					url: apiUrl,
					method: 'GET'
				}
				sendReq.methods.sendReq(params, (res) => {
					this.data = res.data
					// console.log(JSON.parse(res.data.json))
				})
				// uni.navigateTo({
				// 	url:'/pages/tabbar/measure/result'
				// })
			},
			switchTab(index){
				this.index = index
				this.getInfoList()
			}
		}
	}
</script>
<style>
	page{
		height: 100%;
	}
</style>
<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}
	.emptyCart-box {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 1;
		.emptyCart-img {
			width: 113upx;
			height: 98upx;
		}
	}
	.wrap{
		height: 100%;
		background-color: #F6F6F6;
		.wrapTable{
			width: 100%;
			display: flex;
			z-index: 2;
			position: absolute;
			.wrapTableItem{
				width: 50%;
				height: 88upx;
				background-color: #fff;
				.wrapTableItemBtn{
					.wrapTableItemBtnName{
						text-align: center;
						margin-top: 24upx;
					}
					.wrapTableItemBtnBorder{
						width: 32upx;
						height: 4upx;
						background-color: #EFB257;
						margin: 24upx auto 0 auto;
					}
				}
			}
		}
		.wrapList{
			width: 690upx;
			height: 90%;
			overflow: auto;
			margin: 0 auto;
			padding-top: 88upx;
			.wrapListItem{
				width: 100%;
				background-color: #fff;
				border-radius: 16upx;
				margin-top: 24upx;
				.wrapListItemTitle{
					width: 100%;
					height: 92upx;
					border-bottom: 1px solid #DCDCDC;
					padding: 24upx;
					font-size: 32upx;
					color: #333;
					font-weight: bold;
				}
				.wrapListItemContent{
					width: 100%;
					min-height: 160upx;
					padding: 24upx;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;
					.wrapListItemContentLi{
						display: flex;
						margin-bottom: 24upx;
						.wrapListItemContentLiKey{
							width: 150upx;
							font-size: 32upx;
							color: #999;
							margin-right: 40upx;
							text-align: right;
						}
						.wrapListItemContentLiValue{
							width: 450upx;
							font-size: 32upx;
							color: #333;
						}
					}
				}
			}
		}
	}
</style>